<template>
    <div>
      <div class="body" id="tabbar">
        <mu-tabs :value.sync="active" indicator-color="#000" class="tabbar">
          <mu-tab>详情</mu-tab>
          <mu-tab>评论</mu-tab>
          <mu-tab>商品</mu-tab>
          <div class="close" @click="close">×</div>
        </mu-tabs>
        <div v-if="active === 0" class="particulars">
          <p>{{article_content}}</p>
          <tabs :shoucang="shoucang" :pinlun="pinlun" :dianzan="dianzan" :kegoumai="kegoumai"></tabs>
        </div>
        <div v-if="active === 1" class="discuss">
          <div class="reviews_area">
            <div class="reviews" v-for="(v,key) in reviews" :key="key">
              <img :src="v.userHeadIcon" alt="">
              <p>{{v.userName}}</p>
              <div class="fabulous">
                <!-- <span class="animate">+1</span>-->
                <div v-show ="true" ref="zan">
                  <img src="../../../assets/helpServerIcon/fabulous.png" alt="" @click="zan(key)">
                  <p>赞</p>
                </div>
                <div v-show ="false" ref="noZan">
                  <img src="../../../assets/helpServerIcon/red_fabulous.png" alt="" @click="deleteZan(key)">
                  <p>{{v.fabulousNumber}}</p>
                </div>
              </div>
              <p class="commentContent">{{v.comment_content}}</p>
              <div class="commentTime">{{v.comment_time}} <span>回复</span></div>
              <div class="reply">
                <p class="replyContent"><span>{{v.replyName}}&nbsp;:&nbsp;</span>{{v.replyContent}}</p>
                <p style="color:#FF4C50;">查看全部回复</p> <img src="../../../assets/helpServerIcon/ic.png" alt="">
              </div>
              <div class="clear"></div>
            </div>
          </div>
          <leaveMessage :headIcon="headIcon"></leaveMessage>
        </div>
        <div v-if="active === 2" class="goods" style="overflow:scroll;">
          <div style="width:100vw;height:91.77vw;overflow:scroll;">
            <div class="goodsList" v-for="(g,i) in goodsList" :key="i" style="width:44vw;margin:2vw 0vw 0 4vw;display:inline-block;">
              <img :src="g.Img" alt="" style="width:44vw;height:24.74vh;">
              <div class="listBottom" style="width:40vw;margin:0px auto;">
                <p class="tuijian">推荐</p>
                <p style="color:#353535;font-size:13px;">{{g.goodsName}}</p>
                <p style="color:#353535;font-size:13px;">{{g.sell_price}} <span style="color:#888888;font-size:10px;text-decoration:line-through;">{{g.usedPrice}}</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import tabs from '../tabs.vue'
  import leaveMessage from './leaveMessage.vue'
    export default {
        name: "detailTab",
      components:{
          tabs,
        leaveMessage
      },
      props:["article_content","reviews","goodsList"],
        data(){
          return{
            index:-1,
            show:true,
            active:0,
            shoucang:'502',
            pinlun:'34',
            dianzan:'1102',
            kegoumai:'5',
            headIcon:'https://npshop.oss-cn-beijing.aliyuncs.com/img/headico.png'
          }
        },
      methods:{
        zan(key){
          this.$refs.zan[key].style.display = "none";
          this.$refs.noZan[key].style.display = "block";
        },
        deleteZan(key){
          this.$refs.zan[key].style.display = "block";
          this.$refs.noZan[key].style.display = "none";
        },
        close:function(){
          $("#tabbar").hide();
        }
      }
    }
</script>

<style scoped>
.body{
  width:100vw;
  height:59.07vh;
  position:absolute;
  z-index: 111;
  bottom:0px;
  background:#fff;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  overflow:hidden;
  padding-top:13.33vw;
}
.tabbar{
  position:absolute;
  top:0px;
  color:#999999;
  background:#fff;
  display:flex;
}
.close{
  transform:scale(2);
  color:#666666;
  position:absolute;
  right:4vw;
  top:3vw;
}
.mu-tabs{
  border-bottom:1px solid #cecece;
}
.mu-tab-active {
  color: #000;
}
.particulars{
  font-size:15px;
  color:#666666;
}
.particulars p{
  margin-left:10px;
}
.discuss{
  width:100vw;
}
.reviews_area{
  width:92vw;
  margin:0px auto;
  height:78.67vw;
  overflow:scroll;
}
.reviews{
  margin:0px auto;
  width:92vw;
  padding-top:2.3vw;

}
.reviews img{
  width:8vw;
  height:8vw;
  float:left;
}
.reviews p{
  font-size:12px;
  float:left;
  margin-left:2vw;
  margin-top:1.6vw;
  color:#666666;
}
.fabulous{
  float:right;

}
.fabulous img{
  width:4vw;
  height:4.3vw;
  margin-top:2.3vw;
}
.fabulous p{
  font-size:15px;
}
.commentContent{
  width:81.87vw;
  float:right;
}
.commentTime{
  width:79.47vw;
  float:right;
  font-size:12px;
  margin-right:2.9vw;
  margin-top:1vw;
  margin-bottom:1vw;
  color:#666666;
}
.commentTime span{
  float:right;
}
.reply{
  width:81.87vw;
  height:13.33vw;
  background:#f5f5f5;
  float:right;
  font-size:12px;
  color:#666666;
}
.reply img{
  height:2.13vw;
  width:1.33vw;
  margin-top: 3vw;
  margin-left: 1vw;
}
.listBottom .tuijian{
  width:8vw;
  height:4vw;
  background:#FF4C50;
  color:#fff;
  font-size:10px;
  text-align:center;
  line-height:4vw;
}
</style>
